<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Avatar</h1>
        <p>Avatar represents people using icons, labels and images.</p>
    </div>
    <app-demoActions github="avatar" stackblitz="avatar-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="grid">
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Label</h5>
                <p-avatar label="P" styleClass="mr-2" size="xlarge"></p-avatar>
                <p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}"></p-avatar>
                <p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}"></p-avatar>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Label - Circle</h5>
                <p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
                <p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
                <p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Label - Badge</h5>
                <p-avatar label="U" pBadge styleClass="mr-5" value="4" size="xlarge" [style]="{'background-color': '#4caf4f', 'color': '#ffffff'}"></p-avatar>
            </div>
        </div>
    </div>
    <div class="grid">
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Icon</h5>
                <p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge"></p-avatar>
                <p-avatar icon="pi pi-user" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}"></p-avatar>
                <p-avatar icon="pi pi-user" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}"></p-avatar>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Icon - Circle</h5>
                <p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
                <p-avatar icon="pi pi-user" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
                <p-avatar icon="pi pi-user" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Icon - Badge</h5>
                    <p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
            </div>
        </div>
    </div>
    <div class="grid">
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Image</h5>
                <p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
                <p-avatar image="assets/showcase/images/demo/avatar/asiyajavayant.png" styleClass="mr-2" size="large" shape="circle"></p-avatar>
                <p-avatar image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2" shape="circle"></p-avatar>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Avatar Group</h5>
                <p-avatarGroup styleClass="mb-3">
                    <p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
                    <p-avatar image="assets/showcase/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
                    <p-avatar image="assets/showcase/images/demo/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
                    <p-avatar image="assets/showcase/images/demo/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
                    <p-avatar image="assets/showcase/images/demo/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
                    <p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
                </p-avatarGroup>
            </div>
        </div>
        <div class="col-12 md:col-4">
            <div class="card">
                <h5>Image - Badge</h5>
                    <p-avatar image="assets/showcase/images/demo/organization/walter.jpg" pBadge value="4" severity="danger" styleClass="mr-2" size="xlarge"></p-avatar>
            </div>
        </div>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header ="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;AvatarModule&#125; from 'primeng/avatar';
import &#123;AvatarGroupModule&#125; from 'primeng/avatargroup';
</app-code>

            <h5>Getting Started</h5>
            <p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-avatar label="P"&gt;&lt;/p-avatar&gt;
&lt;p-avatar icon="pi pi-search"&gt;&lt;/p-avatar&gt;
&lt;p-avatar image="user.png"&gt;&lt;/p-avatar&gt;
</app-code>

            <h5>Sizes</h5>
            <p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
    &lt;p-avatar label="P" size="large"&gt;&lt;/p-avatar&gt;
</app-code>

            <h5>AvatarGroup</h5>
            <p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-avatarGroup label="P"&gt;
    &lt;p-avatar label="P"&gt;&lt;/p-avatar&gt;
    &lt;p-avatar icon="pi pi-search"&gt;&lt;/p-avatar&gt;
    &lt;p-avatar label="user.png"&gt;&lt;/p-avatar&gt;
    &lt;p-avatar label="+2"&gt;&lt;/p-avatar&gt;
&lt;/p-avatarGroup&gt;
</app-code>

            <h5>Shape</h5>
            <p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-avatar label="P" shape="circle"&gt;&lt;/p-avatar&gt;
</app-code>

            <h5>Badge</h5>
            <p>A badge can be added to an Avatar with the <a href="#" [routerLink]="['/badge']">Badge</a> directive.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-avatar image="user.png" pBadge value="4" severity="danger" size="xlarge"&gt;&lt;/p-avatar&gt;
</app-code>

            <h5>Templating</h5>
            <p>Content can easily be customized with the dynamic content instead of using the built-in modes.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-avatar&gt;
    Content
&lt;/p-avatar&gt;
</app-code>

            <h5>Properties of Avatar</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>label</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines the text to display.</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines the icon to display.</td>
                        </tr>
                        <tr>
                            <td>image</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines the image to display.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Size of the element, valid options are "large" and "xlarge".</td>
                        </tr>
                        <tr>
                            <td>shape</td>
                            <td>string</td>
                            <td>square</td>
                            <td>Shape of the element, valid options are "square" and "circle".</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Properties for AvatarGroup</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>style</td>
                            <td>object</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling of Avatar</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-avatar</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-image</td>
                            <td>Container element in image mode.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-circle</td>
                            <td>Container element with a circle shape.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-text</td>
                            <td>Text of the Avatar.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-icon</td>
                            <td>Icon of the Avatar.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-lg</td>
                            <td>Container element with a large size.</td>
                        </tr>
                        <tr>
                            <td>p-avatar-xl</td>
                            <td>Container element with an xlarge size.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling of AvatarGroup</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-avatar-group</td>
                            <td>Container element.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>

        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/avatar" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-avatar-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="grid"&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Label&lt;/h5&gt;
            &lt;p-avatar label="P" styleClass="mr-2" size="xlarge"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar label="V" styleClass="mr-2" size="large" [style]="&#123;'background-color':'#2196F3', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar label="U" styleClass="mr-2" [style]="&#123;'background-color': '#9c27b0', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Label - Circle&lt;/h5&gt;
            &lt;p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar label="V" styleClass="mr-2" size="large" [style]="&#123;'background-color':'#2196F3', 'color': '#ffffff'&#125;" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar label="U" styleClass="mr-2" [style]="&#123;'background-color': '#9c27b0', 'color': '#ffffff'&#125;" shape="circle"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Label - Badge&lt;/h5&gt;
            &lt;p-avatar label="U" pBadge styleClass="mr-5" value="4" size="xlarge" [style]="&#123;'background-color': '#4caf4f', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="grid"&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Icon&lt;/h5&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" size="large" [style]="&#123;'background-color':'#2196F3', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" [style]="&#123;'background-color': '#9c27b0', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Icon - Circle&lt;/h5&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" size="xlarge" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" size="large" [style]="&#123;'background-color':'#2196F3', 'color': '#ffffff'&#125;" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar icon="pi pi-user" styleClass="mr-2" [style]="&#123;'background-color': '#9c27b0', 'color': '#ffffff'&#125;" shape="circle"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Icon - Badge&lt;/h5&gt;
            &lt;p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="grid"&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Image&lt;/h5&gt;
            &lt;p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" styleClass="mr-2" size="xlarge" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar image="assets/showcase/images/demo/avatar/asiyajavayant.png" styleClass="mr-2" size="large" shape="circle"&gt;&lt;/p-avatar&gt;
            &lt;p-avatar image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="mr-2" shape="circle"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Avatar Group&lt;/h5&gt;
            &lt;p-avatarGroup styleClass="mb-3"&gt;
                &lt;p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" size="large" shape="circle"&gt;&lt;/p-avatar&gt;
                &lt;p-avatar image="assets/showcase/images/demo/avatar/asiyajavayant.png" size="large" shape="circle"&gt;&lt;/p-avatar&gt;
                &lt;p-avatar image="assets/showcase/images/demo/avatar/onyamalimba.png" size="large" shape="circle"&gt;&lt;/p-avatar&gt;
                &lt;p-avatar image="assets/showcase/images/demo/avatar/ionibowcher.png" size="large" shape="circle"&gt;&lt;/p-avatar&gt;
                &lt;p-avatar image="assets/showcase/images/demo/avatar/xuxuefeng.png" size="large"shape="circle"&gt;&lt;/p-avatar&gt;
                &lt;p-avatar label="+2" shape="circle" size="large" [style]="&#123;'background-color':'#9c27b0', 'color': '#ffffff'&#125;"&gt;&lt;/p-avatar&gt;
            &lt;/p-avatarGroup&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-12 md:col-4"&gt;
        &lt;div class="card"&gt;
            &lt;h5&gt;Image - Badge&lt;/h5&gt;
                &lt;p-avatar image="assets/showcase/images/demo/organization/walter.jpg" pBadge value="4" severity="danger" styleClass="mr-2" size="xlarge"&gt;&lt;/p-avatar&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component&#125; from '@angular/core';

@Component(&#123;
    templateUrl: './avatardemo.html']
&#125;)
export class AvatarDemo &#123;

&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-avatar-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
